<template>
  <div class="web-works-detail">
    <h2 class="title w-text-center">
      <p class="production-name">
        {{ production.name }}
        <span class="type">{{ production.type }}</span>
        <a
          v-if="production.url"
          :href="production.url"
          class="production-local"
          target="_blank"
        >
          <i class="el-icon-share"/>
        </a>
      </p>
    </h2>
    <p v-if="production.version" class="versition w-text-center">版本：{{ production.version }}</p>
    <p class="date w-text-center text-time">
      开始时间：{{ production.startDateStr }}
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      结束时间：{{ production.endDateStr }}
    </p>
    <p
      v-if="production.describe"
      class="description w-text-center text-describe"
    >{{ production.describe }}</p>

    <!--项目封面-->
    <div class="covers">
      <div
        v-for="(v, k) in production.covers"
        :key="k"
        :style="{backgroundImage: 'url(' + v + ')'}"
        class="covers-item"
      />
    </div>

    <w-marked-parsing :datastr="production.content"/>
  </div>
</template>

<script lang="ts">
import ProductModel from "@/models/ProductModel";
import WMarkedParsing from "@/components/global/marked/parsing.vue";
import { Component, Vue } from "vue-property-decorator";

@Component({
  components: {
    WMarkedParsing
  }
})
export default class WebWorksDetail extends Vue {
  production = new ProductModel();

  mounted() {
    this.production._id = this.$route.query.id as string;
    this.getData();
  }

  // 获取单个数据
  getData() {
    this.production
      .getModel()
      .then(() => {})
      .catch(() => {});
  }
}
</script>

<style lang="scss" scoped>
.web-works-detail {
  padding: 20px;
  .text-time {
    font-size: 13px;
    line-height: 2;
    color: #999;
  }

  .study-detil {
    padding: 30px 10px;
  }

  .covers {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .covers .covers-item {
    margin: 30px 0;
    width: 260px;
    height: 260px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .production-name {
    padding: 0px 40px;
    display: inline-block;
    position: relative;

    >.type {
      font-size: 18px;
      color: #999;
    }
  }
  .description {
    color: #666;
    line-height: 24px;
  }
  .production-local {
    position: absolute;
    right: 0;
    bottom: 10px;
    width: 20px;
    height: 20px;
    color: #bfcbd9;
  }
  .versition {
    color: #999;
  }
}
</style>

